<template>
    <!-- 人员管理下的老人管理 -->
    <div>
        <el-form :inline="true" :model="formInline" style="margin: 0;">
            <el-form-item label="">
            <el-input v-model="formInline.username" placeholder="用户名(支持模糊查询)"></el-input>
            </el-form-item>
            <el-form-item label="">
            <el-input v-model="formInline.phone" placeholder="联系电话"></el-input>
            </el-form-item>
            <el-form-item label="">
            <el-input v-model="formInline.id_card" placeholder="身份证号"></el-input>
            </el-form-item>
            <el-form-item label="">
            <el-input v-model="formInline.age" placeholder="年龄"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSelect">查询</el-button>
            </el-form-item>
            <el-form-item>
            <el-button  @click="onRest">重置</el-button>
            </el-form-item>
            <el-form-item>
            <el-button type="danger"  @click="deleteListOlder">批量删除</el-button>
            </el-form-item>
            <el-form-item>
            <el-button type="success"  @click="addOlder" style="margin-left: 120px;">新增老人</el-button>
            </el-form-item>
        </el-form>

      <el-divider style="margin-top: 0px; padding: 0;"></el-divider>

      <div style="border-radius: 15px; background-color: white; padding: 20px;">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :default-sort = "{prop: 'last_login_time', order: 'descending'}"
                :row-class-name="tableRowClassName"
                height="550"
                max-height="550"
                >

                <el-table-column
                type="selection"
                width="45"
                align='center'>
                </el-table-column>

                <el-table-column
                label="近期登录"
                width="125"
                prop="last_login_time"
                sortable
                >
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.last_login_time }}</span>
                </template>
                </el-table-column>

                <el-table-column
                label="用户名"
                prop="username"
                width="120"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.username }}</el-tag>
                </template>
                </el-table-column>

                <el-table-column
                prop="sex"
                label="性别"
                width="50">
                </el-table-column>
                
                <el-table-column
                prop="age"
                label="年龄"
                width="75"
                sortable>
                </el-table-column>

                <el-table-column
                prop="phone"
                label="手机号"
                width="120">
                </el-table-column>

                <el-table-column
                prop="id_card"
                label="身份证"
                width="170">
                </el-table-column>

                <el-table-column
                prop="address"
                label="地址"
                show-overflow-tooltip>
                </el-table-column>


                <el-table-column
                label="亲属"
                prop="clan"
                width="120"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.clan }}</el-tag>
                </template>
                </el-table-column>

                <el-table-column
                label="亲属电话"
                prop="clan_phone"
                width="120"
                >
                <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.clan_phone }}</el-tag>
                </template>
                </el-table-column>

                <el-table-column
                prop="employee_id"
                label="负责员工编号"
                width="105">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
      </div>

      <!-- 编辑对话框 -->
      <OlderEditDialogBox/>

      <!-- 添加老人对话框 -->
      <OlderManageAdd/>
      
    </div>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    import OlderEditDialogBox from './OlderEditDialogBox'
    import OlderManageAdd from './OlderManageAdd';
    export default {
        name:'OlderManage',
        components:{
            OlderEditDialogBox,
            OlderManageAdd
        },
        data() {
            return {
                // 查询的数据
                formInline:{
                    username: '',
                    phone: '',
                    age:'',
                    id_card:''
                },
                // 存放老人的信息
                tableData: [],
                // 存放全选的数据
                multipleSelection:[]
            }
        },
        methods:{
            // 批量删除
            deleteListOlder(){
                const arr = [];
                this.multipleSelection.forEach(element => {
                    arr.unshift(element.id);
                });
                if(arr.length === 0){
                    // 提示一下
                    this.$message({
                        message: '没有需要删除的数据!',
                        type: 'warning'
                    });
                    return;
                }
                myAxios(
                    'http://localhost:8088/older/deleteonegroupolder',
                    'post',
                    Qs.stringify({
                        'oldersID':arr
                    }),
                    (data)=>{
                        window.location.reload();
                        // 提示一下
                        this.$message({
                            message: '批量删除成功!',
                            type: 'success'
                        });
                    }
                )
            },
            // 新增老人
            addOlder(){
                this.$bus.$emit('addOlderOnOlderManage',true)

            },
            // 重置按钮
            onRest(){
                window.location.reload();
            },
            // 查询按钮(可以根据用户名来模糊查询)
            onSelect() {
                if(this.formInline.username === '' && this.formInline.phone === '' && this.formInline.age === '' && this.formInline.id_card === ''){
                    this.$notify({
                    title: '警告',
                    message: '请输入条件后再来查询!',
                    type: 'warning'
                    });
                    return;
                }
                myAxios(
                    'http://localhost:8088/older/getallolderbylike',
                    'post',
                    Qs.stringify(this.formInline),
                    (data)=>{
                        if(data.length != 0){
                            this.tableData = data;
                        }else{
                            // 提示一下
                            this.$message({
                                message: '查询结果为空!',
                                type: 'warning'
                            });
                            this.formInline.username = '';
                            this.formInline.phone = '';
                            this.formInline.id_card = '';
                            this.formInline.age = '';
                        }
                    }
                );
            },
            // 批量删除
            handleSelectionChange(val) {
                console.log(val);
                this.multipleSelection = val;
            },
            // 斑马纹颜色
            tableRowClassName({row, rowIndex}) {
                if(rowIndex % 2 === 1){
                    return 'warning-row';
                }else{
                    return '';
                }
            },
            // 编辑
            handleEdit(index, row) {
                this.$bus.$emit('clickAppearDrawer',JSON.parse(JSON.stringify(row)))
            },
            // 删除
            handleDelete(index, row) {
                myAxios(
                    'http://localhost:8088/older/deleteolderbyid?id='+row.id,
                    'get',
                    null,
                    (data)=>{
                        const h = this.$createElement;
                        this.$notify({
                        title: '提示',
                        message: h('i', { style: 'color: teal'}, '删除成功!')
                        });
                        window.location.reload();
                    }
                )
            }
        },
        mounted(){
            // 获取当前管理员名下的所有老人信息
            myAxios(
                'http://localhost:8088/older/getallolderdetailinfo',
                'get',
                null,
                (data)=>{
                    this.tableData = data;
                }
            )
        }
    }
</script>

<style scoped>
.el-divider--horizontal {
    margin-top: 0;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
    content: '';
    position: relative;
    background-color: white;
    z-index: 1;
}
</style>